<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="文章标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入文章标题"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类">
            <el-select v-model="form.categoryId" placeholder="请选择">
              <el-option
                v-for="category in categoryList"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择" multiple>
              <el-option
                v-for="tag in tagList"
                :key="tag.id"
                :label="tag.name"
                :value="tag.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="文章摘要">
            <el-input v-model="form.summary" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="允许评论">
            <el-radio-group v-model="form.isComment">
              <el-radio :key="'0'" :label="'0'">正常</el-radio>
              <el-radio :key="'1'" :label="'1'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否置顶">
            <el-radio-group v-model="form.isTop">
              <el-radio :key="'0'" :label="'0'">是</el-radio>
              <el-radio :key="'1'" :label="'1'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" />

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="缩略图">
            <el-upload
              :file-list="fileList"
              class="upload-demo"
              list-type="picture"
              drag
              name="img"
              action="upload"
              :on-remove="fileRemove"
              :limit="1"
              :http-request="handleUpload"
              :on-exceed="onExceed"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <el-switch
              v-model="imagevalue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleThumbnail"
              :disabled="!imagevalue"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" size="medium" @click="handleSubmit">{{
              aId ? "更新" : "发布"
            }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!aId" type="info" @click="handleSave"
              >保存到草稿箱</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <mavon-editor ref="md" v-model="form.content" @imgAdd="addImg" />
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { listAllCategory } from "@/api/content/category";
import { uploadImg } from "@/api/content/upload";
import {
  addArticle,
  getArticle,
  updateArticle,
  changeArticleThumbnail,
} from "@/api/content/article";
import { listAllTag } from "@/api/content/tag";
export default {
  name: "Write",
  data() {
    return {
      imagevalue: false, //默认没有图片
      form: {
        title: "",
        thumbnail: "",
        isTop: "1",
        isComment: "0",
        content: "",
      },
      categoryList: [],
      tagList: [],
      aId: -1,
      fileList: [],
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.aId = route.query && route.query.id;
        // console.log(this.aId);
      },
      immediate: true,
    },
  },
  created() {
    this.getCategoryAndTag();
    if (this.aId) {
      this.getArticle();
    }
  },

  methods: {
    getArticle() {
      getArticle(this.aId).then((response) => {
        this.form = response;
        console.log(this.form);
        if (
          response.hasOwnProperty("thumbnail") &&
          response.thumbnail !== null
        ) {
          this.fileList.push({ name: "缩略图", url: response.thumbnail });
          this.imagevalue = true; // thumbnail有数据，将开关的值设置为“开”
        } else {
          this.imagevalue = false; // thumbnail无数据，将开关的值设置为“关”
        }
      });
    },

    handleSave() {
      // 验证表单是否填写完整
      if (!this.validateForm()) {
        return;
      }

      this.form.status = "1";
      addArticle(this.form).then((response) => {
        this.$modal.msgSuccess("保存草稿成功");
      });
    },

    validateForm() {
      // 判断文章标题是否为空
      if (!this.form.title) {
        this.$message.error("请输入文章标题");
        return false;
      }

      // 判断分类是否选择
      if (!this.form.categoryId) {
        this.$message.error("请选择分类");
        return false;
      }

      // 判断标签是否选择
      if (this.form.tags.length === 0) {
        this.$message.error("请选择标签");
        return false;
      }

      return true;
    },

    handleSubmit() {
      // 验证表单是否填写完整
      if (!this.validateForm()) {
        return;
      }

      if (!this.aId) {
        // 新增博客逻辑
        this.form.status = "0";
        addArticle(this.form).then((response) => {
          this.$modal.msgSuccess("博客发布成功");
          this.$router.push({ path: "/content/article" });
        });
      } else {
        // 更新博客逻辑
        updateArticle(this.form).then((response) => {
          this.$modal.msgSuccess("博客更新成功");
          this.$router.push({ path: "/content/article" });
        });
      }
    },
    validateForm() {
      // 判断文章标题是否为空
      if (!this.form.title) {
        this.$message.error("请输入文章标题");
        return false;
      }

      // 判断分类是否选择
      if (!this.form.categoryId) {
        this.$message.error("请选择分类");
        return false;
      }

      // 判断标签是否选择
      if (this.form.tags.length === 0) {
        this.$message.error("请选择标签");
        return false;
      }

      return true;
    },
    onExceed() {
      this.$message.error("只能上传一个图片");
    },
    handleUpload(img) {
      uploadImg(img.file)
        .then((response) => {
          this.form.thumbnail = response;
          this.fileList.push({ name: img.file.name, url: response });
          this.imagevalue = true;
          this.$message.success("上传成功");
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },
    fileRemove(file, fileList) {
      this.fileList.pop();
      this.imagevalue = false; // 设置开关状态为true
    },
    // 绑定@imgAdd event
    addImg(pos, file) {
      // 第一步.将图片上传到服务器.
      uploadImg(file)
        .then((response) => {
          this.$refs.md.$img2Url(pos, response);
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },
    getCategoryAndTag() {
      listAllCategory().then((response) => {
        this.categoryList = response;
      });
      listAllTag().then((response) => {
        this.tagList = response;
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleThumbnail() {
      const thumbnail = this.imagevalue ? "0" : ""; // 将开关的值转换为对应的状态

      // 弹出确认框
      this.$confirm("是否将图片链接设置为空？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 用户点击了确定
          changeArticleThumbnail(this.aId, thumbnail).then(() => {
            // 提示图片链接设置为空
            this.$message.success("图片链接已设置为空，正在跳转文章管理页面...");
            setTimeout(() => {
              this.$router.push({ path: "/content/article" }); // 或者使用 this.$router.push({ path: '/' }) 来跳转到当前页面
            }, 1000);
          });
        })
        .catch(() => {
          // 用户点击了取消，此处可以不做任何操作
          this.imagevalue = true;
        });
    },
  },
};
</script>
<style scoped>
/* 移动设备中的样式 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  /* 调整el-row的间距 */
  .el-row {
    margin-bottom: 10px;
  }

  /* 调整el-col的宽度 */
  .el-col {
    width: 100%;
  }

  /* 调整el-input的宽度 */
  .el-input,
  .el-select {
    width: 100%;
  }
}
.el-col .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;

  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
